<template>
	<div>
    <mt-header title="萌宠之家">
        <div slot="right" class="rightslot"><router-link to="/login"> 登录</router-link></div>
    </mt-header>
    <!--表单组件  -->
    <mt-field v-model="uname" :state="userstate" type="text" class="one-input" placeholder="请输入您的用户名"
		@blur.native.capture="checkUsername" style="margin-top:43px"></mt-field>
		<mt-field v-model="upwd" :state="pwdstate" type="password" placeholder="请输入您的密码" @blur.native.capture="checkPassword"></mt-field>
    <mt-field v-model="rname" type="text" :state="rstate" placeholder="请输入您的姓名" @blur.native.capture="checkRname"></mt-field>
    <mt-field v-model="age" type="text" :state="agestate" placeholder="请输入您的年龄" @blur.native.capture="checkAge"></mt-field> 
		<mt-field v-model="phone" type="text" :state="phonestate" placeholder="请输入您的电话" @blur.native.capture="checkPhone"></mt-field>
		<mt-field v-model="email" type="email" :state="emailstate" placeholder="请输入您的邮箱" @blur.native.capture="checkEmail"></mt-field>
    <mt-button size="large" type="primary" @click="checkForm">确认注册</mt-button>
    </div>
</template>
<script>
	export default {
		data() {
			return {
				uname: '',
				userstate: '',
				upwd: '',
				pwdstate: '',
				rname: '',
				rstate: '',
				age: '',
				agestate: '',
				phone: '',
				phonestate: '',
				email: '',
				emailstate: ''

			}
		},
		methods: {
			checkUsername() {
				let regexp = /^\w{6,15}/;
				if (regexp.test(this.uname)) {
					this.userstate = "success";
					return true;
				} else {
					this.userstate = "error";
					return false;
				}
			},
			checkPassword() {
				let regexp = /^\d{6}$/;
				if (regexp.test(this.upwd)) {
					this.pwdstate = "success";
					return true;
				} else {
					this.pwdstate = "error";
					return false;
				}
			},
			checkRname() {
				let regexp = /^[\u4e00-\u9fa5]{2,20}$/;
				if (regexp.test(this.rname)) {
					this.rstate = "success";
					return true;
				} else {
					this.rstate = "error";
					return false;
				}
			},
			checkAge() {
				let regexp = /^\d{1,3}$/;
				if (regexp.test(this.age)) {
					this.rstate = "success";
					return true;
				} else {
					this.rstate = "error";
					return false;
				}
			},
			checkPhone() {
				let regexp = /^1[3-9]\d{9}$/;
				if (regexp.test(this.phone)) {
					this.phonestate = "success";
					return true;
				} else {
					this.phonestate = "error";
					return false;
				}
			},
			checkEmail() {
				let regexp = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				if (regexp.test(this.email)) {
					this.emailstate = "success";
					return true;
				} else {
					this.emailstate = "error";
					return false;
				}
			},
			checkForm() {
				if (this.checkUsername() && this.checkPassword() && this.checkRname() && this.checkAge() && this.checkPhone() &&
					this.checkEmail()) {
					this.axios.post('/user/reg',`uname=${this.uname}&upwd=${this.upwd}&rname=${this.rname}&age=${this.age}&phone=${this.phone}&email=${this.email}`).then(res=>{
						if(res.data.code==200){
							alert("注册成功");
							this.$router.push('/login');
						} else {
					alert("注册失败,用户名存在");
				}
			})
		}
	}
	}
	}
</script>
<style scoped>
.rightslot a{
 text-decoration: none;
 color: #fff;
}
mt-header{
  position: absolute;
  top:50px;
}
</style>

